<template>
	<div class="app">
		<h2>求和为: {{ sum }}</h2>
		<button @click="changeSum">sum+1</button>
		<hr>
		<h2>汽车品牌: {{ car.brand }}, 颜色: {{ car.options.color }}</h2>
		<button @click="changeBrand">修改品牌</button>
		<button @click="changeColor">修改颜色</button>
		<button @click="changeCar">修改车</button>
		<hr>
		<h2>汽车2品牌: {{ car2.brand }}, 颜色: {{ car2.options.color }}</h2>
		<button @click="changeBrand2">修改品牌</button>
		<button @click="changeColor2">修改颜色</button>
		<button @click="changeCar2">修改车</button>
	</div>
</template>

<script setup lang="ts" name="App">
import { ref, reactive, toRaw, markRaw, } from 'vue'
let sum = ref(0)
let car = reactive({
	brand: '宝马',
	options: {
		color: '黑色',
		gear: '自动'
	}
})
// 将响应式对象还原为原始数据
// 官方不推荐,因为开发中可能将car和car2搞混,而修改car2是不会响应到页面上的
// 使用场景,传递对象给非vue库或外部系统时,使用toRaw可以确保他们收到的是普通对象(如axios)
let car2 = toRaw(car)
console.log("响应式数据: ", car)
console.log("原始数据: ", car2)

// markRow,标记一个对象,使其不会变成响应式
let person = markRaw({
	name: "张三",
	age: 26
})
let person2 = reactive(person)
console.log("person: ", person)
// markRaw后, person2哪怕被reactive包裹,也依然是一个原始对象而不是一个响应式对象
console.log("person2: ", person2)
// 使用场景,防止误将某些第三方库的对象包裹为响应式的,如mockjs等
// 另外如城市列表,城市一般是不会改变的,可能也不允许该表,所以可以用markRaw标记

function changeSum() {
	sum.value++
}


function changeBrand() {
	car.brand = "奔驰"
}
function changeColor() {
	car.options.color = '白色'
}
function changeCar() {
	Object.assign(car, {
		brand: '长安',
		options: {
			color: '黄色',
			gear: '手动'
		}
	})
}


function changeBrand2() {
	car2.brand = "奇瑞"
}
function changeColor2() {
	car2.options.color = '蓝色'
}
function changeCar2() {
	Object.assign(car2, {
		brand: '长城',
		options: {
			color: '黄色',
			gear: '手动'
		}
	})
}


</script>

<style>
.app {
	background-color: #ddd;
	border-radius: 10px;
	box-shadow: 0 0 10px;
	padding: 10px;
}

button {
	margin: 0 5px;
}
</style>